<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<footer class="footer mt-auto py-4 text-light">
    <div class="container">
        <div class="row py-4">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <h5 class="text-white mb-3">关于我们</h5>
                <p class="text-light-gray mb-0">教育新闻网致力于为您提供最新、最全面的教育资讯，打造全方位的教育新闻服务平台。</p>
            </div>
            <div class="col-lg-4 mb-4 mb-lg-0">
                <h5 class="text-white mb-3">快速链接</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="${pageContext.request.contextPath}/user/news?category=校园新闻" class="footer-link">校园新闻</a></li>
                    <li class="mb-2"><a href="${pageContext.request.contextPath}/user/news?category=事件新闻" class="footer-link">事件新闻</a></li>
                    <li class="mb-2"><a href="${pageContext.request.contextPath}/user/news?category=活动新闻" class="footer-link">活动新闻</a></li>
                    <li class="mb-2"><a href="${pageContext.request.contextPath}/user/campus-style" class="footer-link">校园风采</a></li>
                    <li><a href="${pageContext.request.contextPath}/admin/login" class="footer-link"><i class="bi bi-shield-lock"></i>后台系统</a></li>
                </ul>
            </div>
            <div class="col-lg-4">
                <h5 class="text-white mb-3">联系方式</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="bi bi-envelope me-2"></i>邮箱：contact@edu-news.com</li>
                    <li class="mb-2"><i class="bi bi-telephone me-2"></i>电话：400-123-4567</li>
                    <li><i class="bi bi-geo-alt me-2"></i>地址：北京市海淀区教育大厦</li>
                </ul>
            </div>
        </div>
        <hr class="border-secondary my-4">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                <span class="text-light-gray">© 2024 教育新闻网. All rights reserved.</span>
            </div>
            <div class="col-md-6 text-center text-md-end">
                <div class="social-links">
                    <a href="#" class="social-link"><i class="bi bi-weixin"></i></a>
                    <a href="#" class="social-link"><i class="bi bi-qq"></i></a>
                    <a href="#" class="social-link"><i class="bi bi-weibo"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

<style>
    /* 引入 Bootstrap Icons */
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");

    html {
        height: 100%;
    }

    body {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .footer {
        background: linear-gradient(to right, #1a1c2b, #2c3e50);
        margin-top: auto;
    }

    .text-light-gray {
        color: #adb5bd;
    }

    .footer-link {
        color: #adb5bd;
        text-decoration: none;
        transition: color 0.3s;
    }

    .footer-link:hover {
        color: #ffffff;
        text-decoration: none;
    }

    .social-links {
        display: inline-flex;
        gap: 20px;
    }

    .social-link {
        color: #adb5bd;
        font-size: 20px;
        transition: color 0.3s;
    }

    .social-link:hover {
        color: #ffffff;
    }

    /* 美化分隔线 */
    .footer hr {
        opacity: 0.2;
    }

    /* 图标样式 */
    .bi {
        margin-right: 8px;
    }
</style> 